$smallSize = 60px
$cubicType = cubic-bezier(0.68, -0.55, 0.265, 1.55)

html
  .tab-bar
    // position relative
    z-index 10
.tab-bar
  position relative
  // background rgba(222,232,255,0.2)
  background #FFF4FB
  border-radius 35px/25px 35px/25px 0 0
  // background-image linear-gradient(0deg, #f7b0b0, rgba(183, 255, 154, 0)), linear-gradient(0deg, rgba(158, 255, 151, 0.75), rgba(183, 255, 154, 0)), linear-gradient(0deg, #b4fffb, rgba(183, 255, 154, 0))
  display flex
  justify-content space-between
  // filter url(https://n1other.hjfile.cn/res7/2020/08/26/368fb179da9fc4f58b4f520f314bec6f.svg#goo)
  // filter url(https://n1other.hjfile.cn/res7/2020/08/26/368fb179da9fc4f58b4f520f314bec6f.svg#goo)
  // filter: drop-shadow(0 -5px 5px #EEEEEE)

  &:after
    content ''
    position absolute
    left 50%
    margin-left -100px
    top: 0
    width 200px
    height 0
    background url('https://image-hosting.xiaoxili.com/img/img/20200920/db6f85c2906a825b4c30c6f2d8daf434-baed5d.svg')  no-repeat
    background-size contain
    // opacity 0
    transition 0.3s $cubicType height

.tab-bar-item
  width 100px
  height 50px
  font-size 12px
  line-height 17px
  color #95A1AF 
  text-align center
  margin-top 0
  transition 0.3s $cubicType margin-top
  position relative
  
  &:before
    content ''
    position absolute
    left 50%
    margin-left -($smallSize /2)
    right 0
    top 0
    width $smallSize 
    height ($smallSize /4)
    background url('https://image-hosting.xiaoxili.com/img/img/20200920/1a06eb5e7de97e4f8263cf3dcb59000f-bae5cb.svg') no-repeat
    background-size contain
    transition 0.3s $cubicType transform
    will-change transform

  

.tab-bar-image
  position relative
  width 24px
  height 24px
  display block
  margin 5px auto -3px
  transition 0.08s $cubicType

.tab-bar-text
  margin-top 3px
.tab-bar-item-hover
  .tab-bar-image
    transform scale(0.8)
.tab-item-active
  color #2F3742
  .tab-bar-image
    padding 6px
    border-radius 18px
    background #FF59B4
    margin-top -6px
    transition 0.15s $cubicType

  &:before
    transform translateY(-12px)

.tab-bar-hide
  &:after
    height 38px
  // &:before
  //   transform translateY(0)

  // &:after
  //   opacity 1
  //   transform translateY(-108px)
  .tab-item-active
    .tab-bar-image
    .tab-bar-text
      opacity 0

.bottom-safe-area
  padding-bottom 12px